<!DOCTYPE html>
<html>
	<!--创建钱包2-->
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title>登陆</title>
		<link rel="stylesheet" type="text/css" href="skin/css/reset.css"/>
		<link rel="stylesheet" type="text/css" href="skin/css/animate.css"/>
		<style type="text/css">
			#app{
				width: 100%;
				height: 100%;
				padding: 0;
			}
			.tip-wrap{
				display: flex;
				padding:10px 20px 8px;
				border-bottom: 1px solid #eee;
			}
			.tip-wrap>.img{
				position: relative;
				flex:0 0 50px;
				display: flex;
				justify-content: center;
				align-items: center;
				height: 50px;
				border-radius: 10px;
			}
			.tip-wrap>.img>span{
				position: absolute;
				top:0;
				right: 0;
				width: 8px;
				height: 8px;
				border-radius: 50%;
				background: #FD3128;
			}
			.tip-wrap>.bgred{
				background: #f4777d;
			}
			.tip-wrap>.bgblue{
				background: #72CCEE;
			}
			.tip-wrap>.bgyellow{
				background: #EEAC72;
			}
			.tip-wrap>.tip-info{
				flex: 1 1 0;
				padding: 0 10px;
			}
			.tip-wrap>.tip-info>span{
				font-size:14px;
			}
			.tip-wrap>.tip-info>p:first-of-type{
				margin-top:5px ;
				margin-bottom: 10px;
				width: 100%;
				height: 11px;
				padding: 5px 8px;
				background: #eee;
				font-size:12px;
				opacity: .5;
				overflow: hidden;
				line-height: 15px;
				transition: .5s;
			}
			.tip-wrap>.tip-info>p:last-of-type{
				opacity: .3;
			}
			
			.no-data{
				display: flex;
				flex-direction: column;
				align-items: center;
				margin-top:200px;
				height: 100vh;
				width: 100vw;
			}
		</style>
	</head>
	
	
	<body>
		<div id="app">
			<!--没有数据的块-->
			<div class="no-data" v-if='!have'>
				<img src="skin/img/no-data.png" width="120px" height="80px"/><br />
				<p style='opacity: .4;'>暂无消息</p>
			</div>
			<!--没有数据的块-->
			
			
			<!--有数据的块-->
			<div v-if='have'>
				<div class="tip-wrap">
					<div class='img bgred'>		
						<span></span>
						<img src="skin/img/notice.png" width='40px' height="25px"/>
					</div>
					<div class="tip-info">
						<span>系统消息</span>
						<p class='open-text' off='open'>恭喜您获得新用户大礼包 18 BTC  恭喜您获得新用户大礼包 18 BTC 恭喜您获得新用户大礼包 18 BTC恭喜您获得新用户大礼包 18 BTC恭喜您获得新用户大礼包 18 BTC</p>
						<p>
							<span>2018年11月22日</span>&nbsp;&nbsp;&nbsp;
							<span>15:02:00</span>
						</p>
					</div>
				</div>
				<div class="tip-wrap">
					<div class='img bgblue'>	
						<span></span>
						<img src="skin/img/zhuan.png" width='30px' height="25px"/>
					</div>
					<div class="tip-info">
						<span>系统消息</span>
						<p class='open-text' off='open'>恭喜您获得新用户大礼包 18 BTC  恭喜您获得新用户大礼包 18 BTC 恭喜您获得新用户大礼包 18 BTC恭喜您获得新用户大礼包 18 BTC恭喜您获得新用户大礼包 18 BTC</p>
						<p>
							<span>2018年11月22日</span>&nbsp;&nbsp;&nbsp;
							<span>15:02:00</span>
						</p>
					</div>
				</div>
				<div class="tip-wrap">
					<div class='img bgyellow'>					
						<img src="skin/img/zhuan.png" width='30px' height="25px"/>
					</div>
					<div class="tip-info">
						<span>系统消息</span>
						<p class='open-text' off='open'>恭喜您获得新用户大礼包 18 BTC  恭喜您获得新用户大礼包 18 BTC 恭喜您获得新用户大礼包 18 BTC恭喜您获得新用户大礼包 18 BTC恭喜您获得新用户大礼包 18 BTC</p>
						<p>
							<span>2018年11月22日</span>&nbsp;&nbsp;&nbsp;
							<span>15:02:00</span>
						</p>
					</div>
				</div>
			</div>
			<!--有数据的块-->
		</div>
		<script src='skin/js/jquery-3.3.1.min.js'></script>
		<script src="skin/js/vue.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="skin/js/comm.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			var app=new Vue({
				el:'#app',
				data:{
					have:true,//有无数据 false(没数据)  true(有数据)
				},
				mounted:function(){
					setTimeout(function(){
						$('.open-text').click(function(){
							if($(this).attr('off')!='open'){
								$(this).css('height','11px');
								$(this).attr('off','open');
							}else{
								$(this).css('height','auto');
								$(this).attr('off','0')
							}
						});
					},500);
				},
				methods:{
					
				}
			});
		</script>
	</body>
</html>


